<template>
    <div class="hello">
        <table>
            <tr>
                <td>药品名称</td>
                <td>用法</td>
                <td>频次</td>
                <td>用量</td>
                <td>数量</td>
            </tr>
            <tr v-for="(item,index) in mzcf" :key="index">
                <td>{{item.ypmc}}</td>
                <td>{{item.yf}}</td>
                <td>{{item.yypc}}</td>
                <td>{{item.yl}}</td>
                <td>{{item.sl}}</td>
            </tr>
        </table>
    </div>
</template>

<script>
    import { getCISPrescriptionDetailApi,getCISDrAdviceDetailApi} from '@/api/healthRecords'
    export default {
        name: 'commontable',
        data () {
            return {
                msg: 'commontable',
                mzcf:[]
            }
        },
        props:['listData'],
        methods: {
            //_1.2.3门诊用药信息的数据接口
            getCISPrescriptionDetail() {
                getCISPrescriptionDetailApi(JSON.stringify(this.listData)).then(response => {
                    if (response.data.code == 1) {
                        response.data.data.forEach(item => {
                            item.isShow = false;
                        });
                        this.mzcf = response.data.data
                    }
                })
            },
            //_1.3.3出院带药信息的数据接口。
            getCISDrAdviceDetail() {
                getCISDrAdviceDetailApi(JSON.stringify(this.listData)).then(response => {
                    if (response.data.code == 1) {
                        response.data.data.forEach(item => {
                            item.isShow = false;
                        });
                        this.mzcf = response.data.data
                    }
                })
            }
        },
        created() {
            //_判断选择哪个数据接口
            if (this.listData.name == "Mzxx") {
                this.getCISPrescriptionDetail();
            }else {
                this.getCISDrAdviceDetail();
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
    table {
        width: 100%;
        border: #0CB7F5 solid 1px;
        tr {
            border-bottom: #0CB7F5 solid 1px;
            color: #333;
            font-size: 1rem;
            line-height: 3rem;
            td {
                border-right: #0CB7F5 solid 1px;
                text-align: center;
            }
            td:nth-child(2) {
                width: 20%;
                line-height: 1.5rem;
            }
            td:nth-child(3) {
                width: 18%;
                line-height: 1.5rem;
            }
            td:nth-child(4) {
                width: 15%;
                line-height: 1.5rem;
            }
            td:nth-child(5) {
                width: 15%;
                line-height: 1.5rem;
            }
        }
        tr:first-child {
            background: #E7F7FC;
            color: #666;
        }
    }
</style>
